<template>
  <view class="index-page">
    <!-- 头部区域 -->
    <view class="header gradient-bg text-white p-6 rounded-b-3xl">
      <view class="text-center">
        <view class="text-4xl font-bold mb-2">Love3</view>
        <view class="text-lg opacity-90">Taro + Vue3 + Vant + Tailwind CSS</view>
        <view class="text-sm opacity-75 mt-2">现代化小程序开发框架</view>
      </view>
    </view>

    <!-- Tab 页面导航 -->
    <view class="container mt-6">
      <view class="card">
        <view class="text-xl font-bold mb-4 text-center">页面导航</view>
        <view class="grid grid-cols-2 gap-4">
          <view 
            v-for="(item, index) in tabPages" 
            :key="index"
            class="nav-card"
            @tap="navigateToTab(item)"
          >
            <view class="text-center">
              <view class="text-3xl mb-3">{{ item.icon }}</view>
              <view class="text-lg font-semibold mb-2">{{ item.title }}</view>
              <view class="text-sm text-gray-600">{{ item.desc }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 技术栈展示 -->
    <view class="container mt-6">
      <view class="card">
        <view class="text-xl font-bold mb-4 text-center">技术栈</view>
        <view class="flex flex-wrap justify-center gap-3">
          <view 
            v-for="tech in techStack" 
            :key="tech.name"
            class="tech-badge"
          >
            <view class="text-sm">{{ tech.name }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'

// Tab 页面数据
const tabPages = ref([
  {
    icon: '🏠',
    title: '首页',
    desc: '应用主页',
    path: '/pages/index/index'
  },
  {
    icon: '🎉',
    title: '活动',
    desc: '精彩活动',
    path: '/pages/activities/index'
  },
  {
    icon: '💕',
    title: '红娘',
    desc: '专业红娘',
    path: '/pages/matchmaker/index'
  },
  {
    icon: '⭐',
    title: '收藏',
    desc: '我的收藏',
    path: '/pages/favorites/index'
  },
  {
    icon: '👤',
    title: '我的',
    desc: '个人中心',
    path: '/pages/mine/index'
  }
])

// 技术栈数据
const techStack = ref([
  { name: 'Taro 4.x', color: 'bg-blue-500' },
  { name: 'Vue 3', color: 'bg-green-500' },
  { name: 'TypeScript', color: 'bg-blue-600' },
  { name: 'Vant', color: 'bg-red-500' },
  { name: 'Tailwind CSS', color: 'bg-cyan-500' },
  { name: 'Pinia', color: 'bg-yellow-500' }
])

/**
 * 导航到 Tab 页面
 * @param item 页面数据
 */
const navigateToTab = (item: any) => {
  Taro.switchTab({
    url: item.path
  })
}
</script>

<style lang="scss" scoped>
.index-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

.tech-badge {
  @apply bg-gray-100 text-gray-700 px-3 py-2 rounded-full text-sm font-medium;
  transition: all 0.3s ease;
  
  &:hover {
    @apply bg-primary-100 text-primary-700;
    transform: translateY(-2px);
  }
}

// 导航卡片样式
.nav-card {
  @apply bg-gray-50 p-4 rounded-lg border border-gray-200;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    @apply bg-primary-50 border-primary-200;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  }
  
  &:active {
    transform: translateY(0);
  }
}

// 卡片悬停效果
.card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    transform: translateY(-4px);
  }
}

// 按钮动画
.btn-primary {
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
  }
  
  &:active::before {
    left: 100%;
  }
}
</style>